.o-icon {
  width      : 2.5em;
  height     : 2.5em;
  border     : none;
  background : none;
  padding    : .25em;

  svg {
    width  : 100%;
    height : 100%;

    fill : var(--svg-fill);
  }

  &:hover {
    svg {
      fill : var(--npm-red);
    }
  }

  &:active {
    svg {
      fill : var(--npm-red-dark);
    }
  }

  &:disabled {
    svg {
      fill : #ccc;
    }
  }

  & .o-pathNoFill {
    fill : none;
  }

  &.o-icon__npm {
    width : 4em;
  }

  &.o-icon__fillBright {
    svg {
      fill : var(--svg-fill-bright);
    }
  }
}
